<template>
<section class="elevator-module" style="top:0;">
  <div class="nav-bg">
    <div class="tips-img"></div>
  </div>
  <div class="nav-list">
    <div class="item sortable on">直播</div>
    <div class="item sortable">动画</div>
    <div class="item sortable">动画</div>
    <div class="item sortable">动画</div>
    <div class="item sortable">动画</div>
    <div class="item sortable">动画</div>
    <div class="item sortable">动画</div>
    <div class="item sortable">动画</div>
    <div class="item sortable">动画</div>
    <div class="item sortable">动画</div>
    <div class="item sortable">动画</div>
  </div>
</section>
</template>

<script>
export default {
  name: 'bnavside',
  data () {
    return {
      msg: ''
    };
  }
};
</script>

<style lang="stylus" scoped>
.elevator-module
  position fixed
  z-index 10
  left 50%
  top 232px
  margin-left 590px
  transition top .3s
  .nav-bg
    // opacity: 0;
    top -15px
    right 0
    height 100%
    padding-bottom 20px
    width 60px
    position absolute
    background hsla(0,0%,100%,.8)
    border-radius 4px
    overflow hidden
    transition all .3s cubic-bezier(.68,-.55,.27,1.55)
    .tips-img
      position absolute
      width 117px
      height 333px
      left 12px
      top 14px
      background url(../../../static/images/tab2233.png)
  .nav-list
    position relative
    background-color #f6f9fa
    border 1px solid #e5e9ef
    overflow hidden
    border-radius 4px
    .item
      width 48px
      height 32px
      line-height 32px
      text-align center
      transition background-color .3s,color .3s
      cursor pointer
      user-select none
      &.on,
      &:hover
        background-color #00a1d6
        color #fff
@media screen and (max-width: 1400px)
  .elevator-module
    margin-left 500px

</style>
